.here-ui-annular-menu {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none; }
  .here-ui-annular-menu * {
    backface-visibility: "hidden";
    -webkit-backface-visibility: "hidden";
    -moz-backface-visibility: "hidden";
    -ms-backface-visibility: "hidden";
    -o-backface-visibility: "hidden"; }
  .here-ui-annular-menu[active], .here-ui-annular-menu.active {
    display: block; }
  .here-ui-annular-menu.event-source {
    pointer-events: all; }
  .here-ui-annular-menu div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box; }
  .here-ui-annular-menu foreignObject {
    pointer-events: none; }
  .here-ui-annular-menu .menu-position {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    pointer-events: all;
    color: #fff; }
  .here-ui-annular-menu .menu-center {
    fill: #ccc;
	fill-opacity:0;
    cursor: pointer; }
    .here-ui-annular-menu .menu-center:active, .here-ui-annular-menu .menu-center.active {
      fill: #b3a5a5; }
  .here-ui-annular-menu .menu-items {
    display: none; }
    .here-ui-annular-menu .menu-items.active {
      display: block; }
    .here-ui-annular-menu .menu-items.menu-items-root {
      display: block; }
  .here-ui-annular-menu .menu-position.collapse > .menu-items {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0); }
  .here-ui-annular-menu .menu-path-g.active > .menu-path {
    fill: #06a0e8; }
  .here-ui-annular-menu .menu-path-g.selected > .menu-path {
    fill: #88969f; }
  .here-ui-annular-menu .menu-path {
    stroke: #fff;
    cursor: pointer;
    fill: #2e4069;
	stroke-width: 1px;
	}
  .here-ui-annular-menu .menu-items-root .menu-path{
	fill: #115cb9;
	stroke-width: 6px;
	}
    .here-ui-annular-menu .menu-path:hover {
      fill: #06a0e8; }
  .here-ui-annular-menu .menu-content {
    width: 100%;
    /*height: 100%;
    overflow: hidden;*/
    text-align: center;
    font-size: 14px;
    border-radius: 50%; }
  .here-ui-annular-menu img {
    pointer-events: none; }
  .here-ui-annular-menu .menu-icon {
    overflow: hidden;
    padding: 0px;
    width: 100%;
    height: 70%; }
    .here-ui-annular-menu .menu-icon img {
      max-width: 100%;
      max-height: 100%; }
  .here-ui-annular-menu .menu-text {
    width: 100%;
    height: 25%;
    font-weight:400;
    font-size:12px;
    font-family:'Microsoft Yahei';
    /*overflow: hidden;*/
    text-align: center;
    text-overflow: ellipsis; }
@keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-webkit-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-moz-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-ms-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-o-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-webkit-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-moz-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-ms-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-o-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
  .here-ui-annular-menu .here-ui-annular-menu .menu-position.collapse > .menu-items {
    animation: collapse-enter 0.4s;
    -webkit-animation: collapse-enter 0.4s;
    -moz-animation: collapse-enter 0.4s;
    -ms-animation: collapse-enter 0.4s;
    -o-animation: collapse-enter 0.4s; }
  .here-ui-annular-menu .here-ui-annular-menu .menu-position > .menu-center, .here-ui-annular-menu .here-ui-annular-menu .menu-position > .menu-items {
    animation: menu-center-enter 0.4s;
    -webkit-animation: menu-center-enter 0.4s;
    -moz-animation: menu-center-enter 0.4s;
    -ms-animation: menu-center-enter 0.4s;
    -o-animation: menu-center-enter 0.4s; }
@keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-webkit-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-moz-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-ms-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-o-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
  .here-ui-annular-menu .here-ui-annular-menu .menu-items.active {
    animation: menu-items-enter 0.4s;
    -webkit-animation: menu-items-enter 0.4s;
    -moz-animation: menu-items-enter 0.4s;
    -ms-animation: menu-items-enter 0.4s;
    -o-animation: menu-items-enter 0.4s; }
  .here-ui-annular-menu .here-ui-annular-menu, .here-ui-annular-menu .here-ui-annular-menu * {
    -webkit-tap-highlight-color: transparent; }

@keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-webkit-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-moz-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-ms-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@-o-keyframes collapse-enter {
  from {
    transform: scale(1) rotate(90deg);
    -webkit-transform: scale(1) rotate(90deg);
    -moz-transform: scale(1) rotate(90deg);
    -ms-transform: scale(1) rotate(90deg);
    -o-transform: scale(1) rotate(90deg); }
  to {
    transform: scale(0) rotate(0deg);
    -webkit-transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
    -ms-transform: scale(0) rotate(0deg);
    -o-transform: scale(0) rotate(0deg); } }
@keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-webkit-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-moz-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-ms-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-o-keyframes menu-center-enter {
  0% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    opacity: 0;
    color: transparent; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
.here-ui-annular-menu .menu-position.collapse > .menu-items {
  animation: collapse-enter 0.4s;
  -webkit-animation: collapse-enter 0.4s;
  -moz-animation: collapse-enter 0.4s;
  -ms-animation: collapse-enter 0.4s;
  -o-animation: collapse-enter 0.4s; }
.here-ui-annular-menu .menu-position > .menu-center, .here-ui-annular-menu .menu-position > .menu-items {
  animation: menu-center-enter 0.4s;
  -webkit-animation: menu-center-enter 0.4s;
  -moz-animation: menu-center-enter 0.4s;
  -ms-animation: menu-center-enter 0.4s;
  -o-animation: menu-center-enter 0.4s; }
@keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-webkit-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-moz-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-ms-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
@-o-keyframes menu-items-enter {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    opacity: 0;
    color: transparent; }
  30% {
    opacity: 0; }
  80% {
    color: initial; }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    color: initial; } }
.here-ui-annular-menu .menu-items.active {
  animation: menu-items-enter 0.4s;
  -webkit-animation: menu-items-enter 0.4s;
  -moz-animation: menu-items-enter 0.4s;
  -ms-animation: menu-items-enter 0.4s;
  -o-animation: menu-items-enter 0.4s; }

.here-ui-annular-menu, .here-ui-annular-menu * {
  -webkit-tap-highlight-color: transparent; }
